<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="headerSrc" alt="">
      </div>
      <span class="logo">
        小程科技
        <!-- <img :src="logoSrc" alt="" /> -->
      </span>
      <span class="title">电商平台实时监控系统</span>
      <div class="title-right">
        <img @click="handleChangeTheme" :src="themeSrc" class="qiehuan">
        <span class="datetime">{{currTime}}</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="[fullScreenStatus.trend ? 'fullscreen' : '']">
          <!-- 销量趋势图表 -->
          <Trend ref="trend"></Trend>
          <div class="resize">
            <!-- <span @click="changeSize('trend')" :class="['icon-font',fullScreenStatus.trend ? 'icon-iconset0442' : 'icon-iconset0441']"></span> -->
            <img v-if="theme==='vintage'" @click="changeSize('trend')" :src="fullScreenStatus.trend ? inIcon : outIcon" alt="" style="width: 20px;">
            <img v-else @click="changeSize('trend')" :src="fullScreenStatus.trend ? inLightIcon : outLightIcon" alt="" style="width: 20px;">
          </div>
        </div>
        <div id="left-bottom" :class="[fullScreenStatus.seller ? 'fullscreen' : '']">
          <!-- 商家销售金额图表 -->
          <Seller ref="seller"></Seller>
          <div class="resize">
            <!-- <span @click="changeSize('seller')" :class="['icon-font',fullScreenStatus.seller ? 'icon-iconset0442' : 'icon-iconset0441']"></span> -->
            <img v-if="theme==='vintage'"  @click="changeSize('seller')" :src="fullScreenStatus.seller ? inIcon : outIcon" alt="" style="width: 20px;">
            <img v-else @click="changeSize('seller')" :src="fullScreenStatus.seller ? inLightIcon : outLightIcon" alt="" style="width: 20px;">
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="[fullScreenStatus.map ? 'fullscreen' : '']">
          <!-- 商家分布图表 -->
          <Map ref="map"></Map>
          <div class="resize">
            <!-- <span @click="changeSize('map')" :class="['icon-font',fullScreenStatus.map ? 'icon-iconset0442' : 'icon-iconset0441']"></span> -->
            <img v-if="theme==='vintage'" @click="changeSize('map')" :src="fullScreenStatus.map ? inIcon : outIcon" alt="" style="width: 20px;">
            <img v-else @click="changeSize('map')" :src="fullScreenStatus.map ? inLightIcon : outLightIcon" alt="" style="width: 20px;">
          </div>
        </div>
        <div id="middle-bottom" :class="[fullScreenStatus.rank ? 'fullscreen' : '']">
          <!-- 地区销量排行图表 -->
          <Rank ref="rank"></Rank>
          <div class="resize">
            <!-- <span @click="changeSize('rank')" :class="['icon-font',fullScreenStatus.rank ? 'icon-iconset0442' : 'icon-iconset0441']"></span> -->
            <img v-if="theme==='vintage'" @click="changeSize('rank')" :src="fullScreenStatus.rank ? inIcon : outIcon" alt="" style="width: 20px;">
            <img v-else @click="changeSize('rank')" :src="fullScreenStatus.rank ? inLightIcon : outLightIcon" alt="" style="width: 20px;">
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="[fullScreenStatus.hot ? 'fullscreen' : '']">
          <!-- 热销商品占比图表 -->
          <Hot ref="hot"></Hot>
          <div class="resize">
            <!-- <span @click="changeSize('hot')" :class="['icon-font',fullScreenStatus.hot ? 'icon-iconset0442' : 'icon-iconset0441']"></span> -->
            <img v-if="theme==='vintage'" @click="changeSize('hot')" :src="fullScreenStatus.hot ? inIcon : outIcon" alt="" style="width: 20px;">
            <img v-else @click="changeSize('hot')" :src="fullScreenStatus.hot ? inLightIcon : outLightIcon" alt="" style="width: 20px;">
          </div>
        </div>
        <div id="right-bottom" :class="[fullScreenStatus.stock ? 'fullscreen' : '']">
          <!-- 库存销量分析图表 -->
          <Stock ref="stock"></Stock>
          <div class="resize">
            <!-- <span @click="changeSize('stock')" :class="['icon-font',fullScreenStatus.stock ? 'icon-iconset0442' : 'icon-iconset0441']"></span> -->
            <img v-if="theme==='vintage'" @click="changeSize('stock')" :src="fullScreenStatus.stock ? inIcon : outIcon" alt="" style="width: 20px;">
            <img v-else @click="changeSize('stock')" :src="fullScreenStatus.stock ? inLightIcon : outLightIcon" alt="" style="width: 20px;">
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex' // 导入辅助函数
import { getThemeValue } from '@/utils/theme_utils' // 导入主题样式参数
// 导入组件
import Hot from '@/components/Hot'
import Map from '@/components/Map'
import Rank from '@/components/Rank'
import Seller from '@/components/Seller'
import Stock from '@/components/Stock'
import Trend from '@/components/Trend'
export default {
  created () {
    // 注册接收数据的回调函数
    this.$socket.registerCallBack('fullScreen', this.recvData)
    // 注册切换主题的回调函数
    this.$socket.registerCallBack('themeChange', this.recvThemeChange)
    // 当前时间
    this.startChangeTime()
  },
  destroyed () {
    // 注册接收数据的回调函数
    this.$socket.unregisterCallBack('fullScreen')
    // 注册切换主题的回调函数
    this.$socket.unregisterCallBack('themeChange')
    // 移除当前时间定时器
    this.clearChangeTime()
  },
  data () {
    return {
      fullScreenStatus: { // 定义每一个图表全屏状态的值
        hot: false,
        map: false,
        rank: false,
        seller: false,
        stock: false,
        trend: false
      },
      timeId: null,
      currTime: '1996-9-11 03:00:00'
    }
  },
  components: {
    Hot,
    Map,
    Rank,
    Seller,
    Stock,
    Trend
  },
  methods: {
    // 1.全屏函数
    changeSize (chartName) {
      // // 1.改变fullScreenStatus状态
      // this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName]
      // // 2.手动调用每一个图表组件的resizeChart方法
      // this.$nextTick(() => {
      //   this.$refs[chartName].resizeChart()
      //   })
      const targetValue = !this.fullScreenStatus[chartName]
      // 将数据发送给服务端
      this.$socket.send({
        action: 'fullScreen',
        socketType: 'fullScreen',
        chartName,
        value: targetValue
      })
    },

    // 2.接收全屏数据的处理函数
    recvData (res) {
      // 取出哪个图表需要进行切换
      // 切换成什么状态
      const { chartName, value } = res
      this.fullScreenStatus[chartName] = value
      this.$nextTick(() => {
        this.$refs[chartName].resizeChart()
      })
    },

    // 3.切换主题函数
    handleChangeTheme () {
      // 改向服务端发送数据
      this.$socket.send({
        action: 'themeChange',
        socketType: 'themeChange',
        chartName: '',
        value: ''
      })
    },

    // 4.切换主题
    recvThemeChange () {
      // 修改vuex中 theme的值
      this.$store.commit('CHANGE_THEME')
    },

    // 5.当前时间函数
    startChangeTime (date) {
      if (this.timeId) {
        this.clearChangeTime()
      }
      const _this = this
      function run () {
        _this.currTime = new Date().toLocaleString().replace(/年|月/g, '-').replace(/日/g, ' ').replace(/上午/g, ' ').replace(/\//g, '-')
      }
      run()
      this.timeId = setInterval(() => {
        run()
      }, 900)
    },

    // 6.清除时间定时器
    clearChangeTime () {
      this.timeId = null
    }
  },
  computed: {
    logoSrc () {
      return '/static/img/' + getThemeValue(this.theme).logoSrc
    },
    headerSrc () {
      return '/static/img/' + getThemeValue(this.theme).headerBorderSrc
    },
    themeSrc () {
      return '/static/img/' + getThemeValue(this.theme).themeSrc
    },
    containerStyle () {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor
      }
    },
    ...mapState(['theme'])
  }
}
</script>

<style lang="less" scoped>
.fullscreen { // 全屏样式的定义
  position: fixed!important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
      img {
        width: 100%;
      }
    }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position:absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 128px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
      position: relative;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>
